{{define "base"}}
<!DOCTYPE html>
<html lang="en">
<!-- Copyright 2018 The LUCI Authors. All rights reserved.
Use of this source code is governed under the Apache License, Version 2.0
that can be found in the LICENSE file. -->
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <title>{{block "title" .}}CIPD Packages{{end}}</title>
  <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
    }
    a {
      text-decoration: none!important;
    }
    .info-table-key {
      width: 1px;
      white-space: nowrap;
      border-right: 1px solid #cccccc;
    }
    .md-table-key {
      font-family: monospace;
      width: 200px;
      white-space: nowrap;
    }
    .md-table-value {
      font-family: monospace;
      max-width: 0px;
      white-space: nowrap;
    }
    .md-modal-value {
      font-family: monospace;
      width: 100%;
      height: 250px;
    }
    .age-td {
      width: 6em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-right: 1px solid #cccccc;
    }
    .ref-btn {
      display: inline;
      padding: .3em .2em .4em .3em;
      margin-left: 0.1em;
      margin-right: 0.15em;
      font-size: 75%;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: .25em;
    }
    .version-link {
      font-family: monospace;
      text-decoration: none!important;
    }
  </style>
</head>

<body class="pt-2">
  <div class="container">
    <nav class="navbar navbar-expand-md navbar-light bg-light rounded border mb-2">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">CIPD Packages</a>
        <span class="navbar-text">
        {{if .IsAnonymous}}
          <a href="{{.LoginURL}}">Login</a>
        {{else}}
          {{.User.Email}} | <a href="{{.LogoutURL}}">Logout</a>
        {{end}}
        </span>
      </div>
    </nav>

    <div id="content-box">
      {{block "content" .}}{{end}}
    </div>

    <footer style="color: #cccccc;">
      <hr class="mt-1 mb-1">
      <p class="float-end small">
        Handled in {{call .HandlerDuration}}
        <span class="ms-2">Version: {{.AppVersion}}</span>
      </p>
    </footer>
  </div>
</body>

</html>
{{end}}


{{define "download-icon"}}
<img src="/static/icons/download.svg" alt="Download" />
{{end}}


{{define "arrow-down-icon"}}
<img src="/static/icons/arrow-down.svg" />
{{end}}


{{define "package-icon"}}
<img src="/static/icons/package.svg" />
{{end}}


{{define "missing-group-icon"}}
<img src="/static/icons/exclamation-square.svg" alt="missing" title="No such group" />
{{end}}


{{define "breadcrumbs"}}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-light p-2">
    {{range $crumb := .Breadcrumbs }}
      {{if $crumb.Last}}
      <li class="breadcrumb-item active" aria-current="page">
        {{if $crumb.Package}}{{template "package-icon" .}}{{end}}
        {{$crumb.Title}}
      </li>
      {{else}}
      <li class="breadcrumb-item">
        <a href="{{$crumb.Href}}">
          {{if $crumb.Package}}{{template "package-icon" .}}{{end}}
          {{$crumb.Title}}
        </a>
      </li>
      {{end}}
    {{end}}
  </ol>
</nav>
{{end}}


{{define "refs-table"}}
  <h4 class="mb-3">Refs</h4>
  {{if .}}
  <div class="table-responsive">
    <table class="table table-striped table-sm">
    {{range $ref := .}}
      <tr>
        <td class="age-td">{{.Age}}</td>
        <td class="text-truncate" style="max-width: 0px;">
          <a class="btn btn-secondary ref-btn" href="{{.Href}}" title="Set by {{.User}}">
            {{.Title}}
          </a>
          <span class="ms-1">by {{.User}}</span>
        </td>
      </tr>
    {{end}}
    </table>
  </div>
  {{else}}
  <p>None</p>
  {{end}}
{{end}}


{{define "tags-table"}}
  <h4 class="mb-3">Tags</h4>
  {{if .}}
  <div class="table-responsive">
    <table class="table table-striped table-sm">
    {{range $tag := .}}
      <tr>
        <td class="age-td">{{.Age}}</td>
        <td class="text-truncate" style="max-width: 0px;">
          <a class="version-link" href="{{.Href}}" title="Set by {{.User}}">
            {{.Title}}
          </a>
        </td>
      </tr>
    {{end}}
    </table>
  </div>
  {{else}}
  <p>None</p>
  {{end}}
{{end}}
